<template>
    <div class="app-container">

        <el-row :gutter="20">
            <!--锻炼类型数据-->
            <el-col :span="4" :xs="24">
                <div class="head-container">
                    <el-input v-model="typeName" placeholder="请输入锻炼类型名称" clearable prefix-icon="Search"
                        style="margin-bottom: 20px" />
                </div>
                <div class="head-container">
                    <el-tree ref="typeTreeRef" :data="typeTree"
                        :props="{ label: 'label', children: 'children',disabled: 'disabled' }"
                        :expand-on-click-node="false" :filter-node-method="filterNode" node-key="typeId"
                        highlight-current default-expand-all @nodeClick="handleNodeClick" />
                </div>
            </el-col>

            <!-- 锻炼系列数据 -->
            <el-col :span="20" :xs="24">
                <el-form v-show="state.showSearch" ref="queryRef" :model="state.queryParams" :inline="true"
                    label-width="68px">
                    <el-form-item label="系列名称" prop="userName">
                        <el-input v-model="state.queryParams.seriesTitle" placeholder="请输入系列名称" clearable
                            style="width: 240px" @keyup.enter="getDataList" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
                        <!-- <el-button icon="Refresh" @click="resetQuery(proxy)">重置</el-button> -->
                        <el-button icon="Refresh" @click="resetTree">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-row :gutter="10" class="mb8">
                    <!-- <el-col :span="1.5">
                        <el-button v-hasPermi="['exercise:type:add']" type="primary" plain icon="Plus"
                            @click="addOrUpdateHandle()">新增类型</el-button>
                    </el-col> -->
                    <el-col :span="1.5">
                        <el-button v-hasPermi="['exercise:series:add']" type="primary" plain icon="Plus"
                            @click="addOrUpdateHandle()">新增系列</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button v-hasPermi="['exercise:series:edit']" type="success" plain icon="Edit"
                            :disabled="state.single" @click="addOrUpdateHandle(state.ids[0])">编辑</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button v-hasPermi="['exercise:series:remove']" type="danger" plain icon="Delete"
                            :disabled="state.multiple" @click="deleteBatchHandle">删除</el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="state.showSearch" :columns="columns"
                        @queryTable="getDataList"></right-toolbar>
                </el-row>

                <el-table v-loading="state.dataListLoading" :data="state.rows" @selectionChange="selectionChangeHandle">
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column v-if="columns[0].visible" key="seriesId" label="系列编号" align="center"
                        prop="seriesId" />
                    <el-table-column v-if="columns[1].visible" key="title" label="系列标题" align="center" width="180">
                        <template #default="scope">
                            <router-link :to="'/app/exercise/series-action/index/'+ scope.row.seriesId"
                                class="link-type">
                                <span>{{ scope.row.title }}</span>
                            </router-link>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="columns[2].visible" key="typeName" label="锻炼类型" align="center"
                        prop="typeName" :show-overflow-tooltip="true" />
                    <el-table-column v-if="columns[3].visible" key="time" label="时长(分钟)" align="center" prop="time"
                        :show-overflow-tooltip="true" />
                    <el-table-column v-if="columns[4].visible" key="consume" label="消耗(千卡)" align="center"
                        prop="consume" :show-overflow-tooltip="true" />
                    <el-table-column v-if="columns[5].visible" key="equip" label="设备" align="center" prop="equip"
                        :show-overflow-tooltip="true" />
                    <el-table-column v-if="columns[6].visible" key="focus" label="焦点" align="center" prop="focus"
                        :show-overflow-tooltip="true" />
                    <el-table-column v-if="columns[7].visible" key="path" label="图片路径" align="center" prop="path"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-tooltip content="编辑" placement="top">
                                <el-button v-hasPermi="['exercise:series:edit']" link type="primary" icon="Edit"
                                    @click="addOrUpdateHandle(scope.row.seriesId)"></el-button>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <el-button v-hasPermi="['exercise:series:remove']" link type="danger" icon="Delete"
                                    @click="deleteHandle(scope.row.seriesId)"></el-button>
                            </el-tooltip>
                            <el-tooltip content="展开" placement="top">
                                <el-button v-hasPermi="['exercise:series:query']" link type="success" icon="Switch"
                                    @click="openDrawer(scope.row)"></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="state.total > 0" v-model:page="state.pageNum" v-model:limit="state.pageSize"
                    :total="state.total" @pagination="query" />
            </el-col>
        </el-row>

        <AddOrEdit ref="addOrUpdateRef" @refreshDataList="getDataList" :typeTree="typeTree"></AddOrEdit>

        <!-- 展开-查看图片 -->
        <el-drawer v-model="drawer" :direction="direction">
            <template #header>
                <h4 class="bold">锻炼系列</h4>
            </template>
            <template #default>
                <el-descriptions :size="size" :column="1" border>
                    <el-descriptions-item>
                        <template #label>
                            <div class="bold">
                                锻炼标题
                            </div>
                        </template>
                        {{openSeries?.title}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template #label>
                            <div class="bold">
                                封面图片
                            </div>
                        </template>
                        <el-image style="width: 200px; height: 200px" :src="openSeries?.path" :zoom-rate="1.2"
                            :max-scale="7" :min-scale="0.2" :initial-index="4" fit="contain" />
                    </el-descriptions-item>
                </el-descriptions>
            </template>
        </el-drawer>

    </div>
</template>

<script setup name="Series" lang="ts">
    import { ComponentSize, DrawerProps, ElTree } from 'element-plus';
    import { IHooksOptions } from '@/hooks/hooksinterface'
    import { useCrud } from '@/hooks/hooksservice'
    import { ref, reactive, getCurrentInstance, ComponentInternalInstance, watch } from 'vue'
    import { getTree, listSeries, delSeries } from '@/api/app/exercise'
    import AddOrEdit from './series-add-or-edit.vue'

    const { proxy } = getCurrentInstance() as ComponentInternalInstance;

    const typeTree = ref(undefined)
    const typeTreeRef = ref<InstanceType<typeof ElTree>>()

    const typeName = ref('');

    // 抽屉控制
    const drawer = ref(false)
    const direction = ref<DrawerProps['direction']>('rtl')
    const openSeries : any | undefined = ref(undefined)
    // const title = ref("")
    const size = ref<ComponentSize>('large')

    const state : IHooksOptions = reactive({
        queryApi: listSeries,
        deleteApi: delSeries,
        primaryKey: 'seriesId',
        pageNum: 1,
        pageSize: 10,
        queryParams: {
            typeId: undefined,
            seriesTitle: ''
        }
    })

    const { getDataList, selectionChangeHandle, resetQuery, query, deleteBatchHandle, deleteHandle } = useCrud(state)

    // 列显隐信息
    const columns = ref([
        { key: 0, label: `系列编号`, visible: true },
        { key: 1, label: `系列标题`, visible: true },
        { key: 2, label: `类型id`, visible: false },
        { key: 3, label: `时长`, visible: true },
        { key: 4, label: `消耗`, visible: true },
        { key: 5, label: `设备`, visible: true },
        { key: 6, label: `焦点`, visible: false },
        { key: 7, label: `图片路径`, visible: false }
    ]);

    /** 获取锻炼类型树 */
    function getTypeTree() {
        getTree().then((res : { data : any; }) => {
            typeTree.value = res.data
        })
    }

    /** 节点单击事件 */
    function handleNodeClick(data : any) {
        state.queryParams.typeId = data.typeId;
        getDataList()
    }

    /** 通过条件过滤节点  */
    const filterNode = (value : any, data : any) => {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    };
    /** 根据名称筛选类型树 */
    watch(typeName, val => {
        (proxy?.$refs['typeTreeRef'] as any).filter(val);
    });

    // 调用新增或修改页面的方法
    const addOrUpdateRef = ref()

    //新增或修改的时候传递id
    const addOrUpdateHandle = (id ?: number) => {
        //调用它里面的init方法
        addOrUpdateRef.value.init(id)
    }

    const resetTree = () => {
        state.queryParams.typeId = undefined
        state.queryParams.seriesTitle = ''
        typeTreeRef.value?.setCurrentKey(null as any)
        resetQuery(proxy)
    }

    const openDrawer = (row : any) => {
        openSeries.value = row
        drawer.value = true
    }

    getTypeTree()
</script>

<style scope>
    .bold {
        font-weight: 600;
    }
</style>
